<che-popup title="Edit machine name"
           on-close="editMachineNameDialogController.hide()"
           class="edit-machine-name-dialog-content">
  <ng-form flex layout="column" name="machineNameForm">
    <che-label-container che-label-name="Name">
      <div class="edit-machine-name-dialog-input">
        <che-input che-form="machineNameForm"
                   che-name="name"
                   che-place-holder="Machine name"
                   ng-model="editMachineNameDialogController.name"
                   custom-validator="editMachineNameDialogController.isUnique($value)"
                   required
                   ng-maxlength="128"
                   ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
          <div ng-message="required">A name is required.</div>
          <div ng-message="customValidator">This name is already used.</div>
        </che-input>
      </div>
    </che-label-container>

    <che-label-container>
      <div layout="row" layout-align="end end">
        <che-button-primary che-button-title="Update"
                            ng-disabled="machineNameForm.$invalid"
                            ng-click="editMachineNameDialogController.updateMachineName()"></che-button-primary>

        <che-button-notice che-button-title="Close"
                           ng-click="editMachineNameDialogController.hide()"
                           tabindex="0"></che-button-notice>
      </div>
    </che-label-container>
  </ng-form>
</che-popup>
